import { Drawer, Tabs, TabsProps } from "antd";
import styles from "@/layout/Configuration/Configuration.module.scss";
import { IconFontResponse } from "@/types";
import { useEffect, useState } from "react";
interface IconMap {
  ltdx: IconFontResponse;
  sgcc: IconFontResponse;
  ticon: IconFontResponse;
}
interface Props {
  open: boolean;
  curKey: string;
  onClose: () => void;
  iconMap: IconMap;
  onChoose: (
    iconFamily: "ltdx" | "sgcc" | "ticon",
    unicodeString: string,
  ) => void;
}
function RenderIcons({
  type,
  iconMap,
  onChoose,
}: {
  type: "ltdx" | "sgcc" | "ticon";
  iconMap: IconMap;
  onChoose: (
    iconFamily: "ltdx" | "sgcc" | "ticon",
    unicodeString: string,
  ) => void;
}) {
  return (
    <div className={styles.icons}>
      {iconMap[type].glyphs.map((item, index) => {
        return (
          <div
            className={"item"}
            key={type + index}
            onClick={() => {
              onChoose(type, unescape("%u" + item.unicode));
            }}
          >
            <i
              className={`icon ${iconMap[type].font_family} ${
                iconMap[type].css_prefix_text + item?.font_class
              }`}
            ></i>
          </div>
        );
      })}
    </div>
  );
}
export function IconSelection(props: Props) {
  const [activeKey, setActiveKey] = useState(props.curKey);
  useEffect(() => {
    setActiveKey(() => props.curKey);
  }, [props.curKey]);
  const items: TabsProps["items"] = [
    {
      key: "ticon",
      label: "常用图标",
      children: (
        <RenderIcons
          onChoose={props.onChoose}
          iconMap={props.iconMap}
          type={"ticon"}
        />
      ),
    },
    {
      key: "sgcc",
      label: "国家电网",
      children: (
        <RenderIcons
          onChoose={props.onChoose}
          iconMap={props.iconMap}
          type={"sgcc"}
        />
      ),
    },
    {
      key: "ltdx",
      label: "电气工程",
      children: (
        <RenderIcons
          onChoose={props.onChoose}
          iconMap={props.iconMap}
          type={"ltdx"}
        />
      ),
    },
  ];
  return (
    <>
      <Drawer
        title="选择字体图标"
        placement="right"
        open={props.open}
        onClose={props.onClose}
      >
        <Tabs
          activeKey={activeKey}
          items={items}
          onChange={(key) => setActiveKey(key)}
        />
      </Drawer>
    </>
  );
}
